<template>
  <view class="resources">
    <view class="resource-item">
      <view class="resource-icon blue">{{ resource.blueBlock }}</view>
      <view class="resource-value" v-if="props.type === ''">
        <image src="/static/images/home/blueCrystal.png" class="crystal-icon" />
        x {{ resource.bluePiece }}
      </view>
    </view>
    <view class="resource-item">
      <view class="resource-icon red">{{ resource.redBlock }}</view>
      <view class="resource-value" v-if="props.type === ''">
        <image src="/static/images/home/redCrystal.png" class="crystal-icon" />
        x {{ resource.redPiece }}
      </view>
    </view>
    <view class="resource-item">
      <view class="resource-icon gold">{{ resource.yellowBlock }}</view>
      <view class="resource-value" v-if="props.type === ''">
        <image src="/static/images/home/goldCrystal.png" class="crystal-icon" />
        x {{ resource.yellowPiece }}
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
const resource = userStore.userInfo
const props = defineProps({
  type: {
    type: String,
    default: '',
  },
})
onShow(() => {})
</script>
<style scoped lang="scss">
.resources {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
  position: relative;
  z-index: 10;

  .resource-item {
    .resource-icon {
      width: 200rpx;
      font-size: 30rpx;
      padding-left: 40rpx;
      &.blue {
        background: url('/static/images/home/blue.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      &.red {
        background: url('/static/images/home/red.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      &.gold {
        background: url('/static/images/home/gold.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
    }

    .resource-value {
      font-size: 25rpx;
      display: flex;
      align-items: center;
      text-align: left;
      margin: 20rpx 0 0 10rpx;
      .crystal-icon {
        width: 25rpx;
        height: 40rpx;
      }
    }
  }
}
</style>
